<template>
	<view class="evalPublish">
		<navBar isBack backColor="#333" title="点评" background="#fff" color="#333"></navBar>
		<view class="pubContent">
			<textarea value="" v-model="content" placeholder-class="placeStyle" placeholder="说说你对本楼盘的环境、位置、配套设施的看法~" />
			<view class="imgWrap">
				<view class="imgBox" v-for="(item,index) in imgList" :key="index">
					<image :src="item.path" mode=""></image>
				</view>
				<view class="img">
					<image :src="`${baseImg}/static/onePlusN/addImg.png`" mode="" @click="uploadImg"></image>
				</view>
			</view>
			<!-- <view class="toselect">
				<u-checkbox-group active-color="#C3AB7C">
					<u-checkbox v-model="checked" shape="circle">匿名提交</u-checkbox>
				</u-checkbox-group>
				<span>您的用户昵称和头像将不会对外展示</span>
			</view> -->
		</view>
		<view class="btn">
			<button type="default" @click="toPublish">发表</button>
		</view>
	</view>
</template>

<script>
	import URL from '@/config/url.js'
	import service_oneN from '@/service/oneN.js'
	export default {
		data() {
			return {
				baseImg: 'http://manager.ryz1620.com',
				checked: false,
				estate_id: null,
				content: '',
				imgList: []
			}
		},
		onLoad(options) {
			this.$utils.getUrl()
			this.estate_id = options.estate_id
		},
		methods: {
			uploadImg() {
				let that = this
				uni.chooseImage({
					count: 1,
					success: (res) => {
						const tempFilePaths = res.tempFilePaths;
						uni.uploadFile({
							url: URL.ENTER_UPLOAD_IMAGE,
							filePath: tempFilePaths[0],
							name: 'file',
							formData: {
								'user': 'test'
							},
							success: (uploadFileRes) => {
								uni.showLoading({
									title: '上传中'
								})
								console.log(uploadFileRes.data);
								let data = JSON.parse(uploadFileRes.data)
								if (data.code == 1) {
									console.log(data, '图片数据')
									that.imgList.push({
										path: data.data.url,
										id: data.data.id
									})
									console.log(that.imgList)
									uni.showToast({
										title: '上传成功',
										icon: 'success'
									})
								} else {
									uni.showToast({
										title: data.msg,
										icon: 'none'
									})
								}
								setTimeout(function() {
									uni.hideLoading()
								}, 500)
							}
						});
					}
				});
			},

			// 发表点评
			toPublish() {
				let imgArr = []
				this.imgList.map(item => {
					imgArr.push(item.id)
				})
				if (this.content == '') {
					uni.showToast({
						title: '请输入内容',
						icon: 'none'
					})
					return
				}
				if (!imgArr.length) {
					uni.showToast({
						title: '请上传图片',
						icon: 'none'
					})
					return
				}
				let params = {
					estate_id: this.estate_id,
					content: this.content,
					thumb_url: imgArr.join(',')
				}
				console.log(params)
				service_oneN.userEvalPub(params).then(res => {
					console.log(res)
					if (res.code == 1) {
						uni.showToast({
							title: '发表成功',
							icon: 'none'
						})
						this.content = '',
							this.imgList = []
					} else {
						uni.showModal({
							title: '提示',
							content: res.msg,
							showCancel: false,
							success(res) {
								if (res.confirm) {
									// console.log('用户点击确定')
									this.content = ''
									// content = ''
								}
							}
						})
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.evalPublish {
		.pubContent {
			width: 702rpx;
			// height: 606rpx;
			background-color: #fff;
			margin: 24rpx auto;
			padding: 40rpx 28rpx;

			textarea {
				width: 100%;
			}

			.placeStyle {
				font: 400 26rpx/40rpx PingFang SC;
				color: #A0A0A0;
			}

			.imgWrap {
				display: flex;
				align-items: center;

				.imgBox {
					width: 164rpx;
					height: 164rpx;
					display: flex;
					border-radius: 4rpx;
					margin-right: 5rpx;

					image {
						width: 164rpx;
						height: 164rpx;
						border-radius: 4rpx;
					}
				}

				.img {
					width: 164rpx;
					height: 164rpx;
					border-radius: 4rpx;
					display: flex;
					flex-direction: column;
					align-items: center;
					justify-content: center;
					background-color: #F6F7FB;

					image {
						width: 56rpx;
						height: 56rpx;
						border-radius: 4rpx;
					}
				}
			}

			.toselect {
				display: flex;
				align-items: center;
				justify-content: space-between;
				margin-top: 28rpx;
				font: 400 26rpx/40rpx PingFang SC;
				color: #505050;

				span {
					font: 400 24rpx/36rpx PingFang SC;
					color: #A0A0A0;
				}
			}
		}

		// 发表按钮
		.btn {
			width: 100%;
			height: 108rpx;
			position: fixed;
			left: 0;
			bottom: 0;
			height: calc(108rpx+ constant(safe-area-inset-bottom)); ///兼容 IOS<11.2/
			height: calc(108rpx + env(safe-area-inset-bottom)); ///兼容 IOS>11.2/
			padding-bottom: constant(safe-area-inset-bottom); ///兼容 IOS<11.2/
			padding-bottom: env(safe-area-inset-bottom); ///兼容 IOS>11.2/

			button {
				width: 520rpx;
				height: 88rpx;
				margin: 10rpx auto;
				background-color: #C3AB7C;
				border-radius: 44rpx;
				font: 600 32rpx/88rpx PingFang SC;
				color: #fff;
			}
		}
	}
</style>
